<template>
<div class="tw-timeline" :style="{backgroundColor: bgColor}">
	<div class="tw-timeline-list" v-if="data.length>0">
		<div class="timeline-item" v-for="(item, index) in data" :key="index">
			<div class="timeline-icon">
				<!-- <img src="@assets/0.png" alt=""> -->
			</div>
			<div class="timeline-content">
				<div class="xheader">
          <div class="xtitle" v-html="item.title"></div>
          <div style="padding-left:10px" class="xsubtitle">{{item.subtitle}}</div>
        </div>
				<div class="xcontent" v-html="item.content"></div>
			</div>
		</div>
	</div>
  <div class="tw-libnodata" v-if="data.length === 0 && !ifnodataShow"></div>
</div>
</template>

<script>
const props = require('./props')

export default {
  name: 'web-timeline',

  props,

  data() {
    return {
    }
  },

  computed: {
    style () {
      return {
        overflow: this.overflow,
        lineWidth: this.lineWidth,
        listWidth: this.listWidth,
        linecolor: this.linecolor,
        itemWidth: this.itemWidth,
        itemHeight: this.itemHeight,
        imgWidth: this.imgWidth,
        marginTop: this.marginTop,
        titleFontSize: this.titleFontSize,
        titlecolor: this.titlecolor,
        subtitleFontSize: this.subtitleFontSize,
        subtitlecolor: this.subtitlecolor,
        contentFontSize: this.contentFontSize,
        contentcolor: this.contentcolor,
        bgImg: this.bgImg,
        scrolWidth: this.scrolWidth
      }
    }
  },


  methods: {
    setStyle () {
      const imagewidth = Math.round(parseInt(this.imgWidth) / 2) - 1

      let style = `
        ::root.tw-timeline {
          overflow-y:  ${this.overflow};
        }
        ::root.tw-timeline .tw-timeline-list {
          width:  ${this.listWidth};
          margin: ${this.marginWidth} auto;
        }
        ::root.tw-timeline .tw-timeline-list::before {
          width:  ${this.lineWidth};
          background: ${this.linecolor};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-item {
          margin-bottom:  ${this.itemHeight};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-icon {
          background:  ${this.labelcolor};
          margin-left: ${imagewidth};
          width: ${this.imgWidth};
          height: ${this.imgWidth};
        }
        ::root.tw-timeline .tw-timeline-list .timeline-icon img {
          width: ${this.imgWidth};
          height: ${this.imgWidth};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-content {
          margin-left: ${this.itemWidth};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-content .xtitle {
          font-size: ${this.titleFontSize};
          color: ${this.titlecolor};
        }
        ::root.tw-timeline .tw-timeline-list .timeline-content .xsubtitle {
          font-size: ${this.subtitleFontSize};
          color: ${this.subtitlecolor};
        }
        ::root.tw-timeline .tw-timeline-list .timeline-content .xcontent {
          margin-top: ${this.marginTop};
          font-size: ${this.contentFontSize};
          color: ${this.contentcolor};
        }
      `

      style += `
            ::-webkit-scrollbar {
              width: ${this.scrolWidth};
            }

            ::-webkit-scrollbar-track {
              -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
              border-radius: 10px;
            }

            ::-webkit-scrollbar-thumb {
              border-radius: 10px;
              background: rgba(0,82,217,0.5);
              -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
            }

            ::-webkit-scrollbar-thumb:hover {
              border-radius: 10px;
              background: rgba(0,82,217,1);
              -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
            }
          `

      if (this.bgImg[0]) {
        this.style += `
          ::root.tw-timeline .tw-timeline-list .timeline-icon {
            background-image: url(${this.$twApp.fileBaseUrl}${this.bgImg[0].localPath});
          }
        `
      }
      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    }
  },

  mounted () {
    this.setStyle()
  },

  beforeDestroy () {
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
